// 导入了Vue
import Vue from 'vue'
// 导入Vue-Router
import VueRouter from 'vue-router'

// 导入了要显示的组件
import HomeView from '../views/HomeView.vue'

// 给Vue安装路由 --- 让Vue多了路由的功能
Vue.use(VueRouter)


// 制定路由规则
// 也就是指定用什么样的路径去访问哪个组件
const routes = [
  {
    // 路径为/（路径后面什么都不加）
    // 就切换到HomeView这个组件
    path: '/',
    // 只是给这个路由起一个名字
    name: 'home',
    component: HomeView
  },
  {
    // 用`/about`路径就切换到AboutView这个组件
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('../views/AboutView.vue')
  }
]

// 实例化路由对象，而且把上面定义的规则用到这个路由身上
const router = new VueRouter({
  routes
})

// 暴露路由对象出去
export default router
